<template>
  <div class="skeleton">
    <div>
      <div
        v-masonry="containerId"
        transition-duration="0.3s"
        item-selector=".item"
      >
        <div
          v-masonry-tile
          class="item f-d-c f-j-sb-a-c"
          style="margin-left: 20px"
        >
          <div class="imgss"></div>
          <div class="neirong f-a-c f-j-sb-a-c">
            <div class="content_title">
              <span></span>

              <img src="" alt="" />
            </div>
            <div class="shuju f-a-c">
              <span>￥{{}}</span>
              <img src="../../../assets/image/icon-download@2x.png" alt="" />
              <span>{{}}</span>
            </div>
          </div>
          <div class="pucontent">
            <span>{{}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({});
    onMounted(() => {});
    onUnmounted(() => {});
    return {
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.imgss {
  width: 240px;
  height:  240px;
  background-color: #e0e0e0;
}
.item {
  margin-top: 40px;
  width: 240px;
  .neirong {
    width: 100%;
    .content_title {
      margin-top: 10px;
      margin-bottom: 10px;
      > img {
        width: 16px;
        height: 16px;
      }
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }
    }
    .shuju {
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
        &:last-child {
          font-size: 12px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
          margin-left: 6px;
        }
      }
      > img {
        cursor: pointer;
        margin-left: 11px;
        width: 16px;
        height: 16px;
      }
    }
  }
  .pucontent {
    > span {
      font-size: 12px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #656f79;
    }
  }
}
.skeleton {
  background-color: #f0f2f5;
  width: 100%;
  height: 100%;
}

.skeleton-header {
  background-color: #e0e0e0;
  height: 200px;
}

.skeleton-content {
  padding: 10px;
}

.skeleton-row {
  background-color: #e0e0e0;
  height: 20px;
  margin-bottom: 10px;
}

@keyframes loading {
  0% {
    background-color: #e0e0e0;
  }
  50% {
    background-color: #f0f0f0;
  }
  100% {
    background-color: #e0e0e0;
  }
}

.skeleton-header,
.skeleton-row {
  animation: loading 1.5s infinite;
}
</style>
